/**
 * 统一的加载状态组件
 * 用于展示加载动画，支持全局和局部加载状态
 */

const mobx = require('../../../framework/mobx/mobx_wx.js');
const { uiStore } = require('../../../store/global/ui.js');

Component({
  /**
   * 使用MobX绑定行为
   */
  behaviors: [mobx.storeBindingsBehavior],
  
  /**
   * 配置MobX绑定
   */
  storeBindings: {
    store: uiStore,
    fields: {
      globalLoading: 'isLoading',
      loadingTasks: (store) => store.loading.tasks
    }
  },
  
  /**
   * 组件选项
   */
  options: {
    addGlobalClass: true,
    styleIsolation: 'shared'
  },
  
  /**
   * 组件属性
   */
  properties: {
    // 是否阻止用户交互
    mask: {
      type: Boolean,
      value: true
    },
    
    // 是否透明背景
    transparent: {
      type: Boolean,
      value: false
    },
    
    // 加载提示文本
    loadingText: {
      type: String,
      value: '加载中...'
    },
    
    // 加载图标大小
    size: {
      type: String,
      value: 'default' // small, default, large
    },
    
    // 加载状态键，不设置则监听全局状态
    loadingKey: {
      type: String,
      value: ''
    },
    
    // 是否显示，外部可控制
    show: {
      type: Boolean,
      value: null
    },
    
    // 加载图标颜色
    color: {
      type: String,
      value: '' // 默认主题色
    },
    
    // 是否全屏
    fullscreen: {
      type: Boolean,
      value: false
    }
  },
  
  /**
   * 组件内部数据
   */
  data: {
    // 是否显示加载动画
    visible: false
  },
  
  /**
   * 数据监听器
   */
  observers: {
    // 监听属性变化和全局状态
    'show, loadingKey, globalLoading, loadingTasks': function(show, loadingKey, globalLoading, loadingTasks) {
      // 如果外部传入show属性，则使用外部值
      if (show !== null) {
        this.setData({ visible: show });
        return;
      }
      
      // 否则根据loadingKey监听对应的加载状态
      if (loadingKey) {
        // 监听具体的加载任务
        this.setData({ visible: !!loadingTasks[loadingKey] });
      } else {
        // 监听全局加载状态
        this.setData({ visible: globalLoading });
      }
    }
  },
  
  /**
   * 组件生命周期
   */
  lifetimes: {
    /**
     * 组件实例进入页面节点树时执行
     */
    attached: function() {
      // 初始化状态
      if (this.properties.show !== null) {
        this.setData({ visible: this.properties.show });
      } else if (this.properties.loadingKey) {
        this.setData({ visible: !!this.data.loadingTasks[this.properties.loadingKey] });
      } else {
        this.setData({ visible: this.data.globalLoading });
      }
    }
  },
  
  /**
   * 组件方法
   */
  methods: {
    /**
     * 阻止事件冒泡
     */
    preventTouchMove: function() {
      return false;
    }
  }
}); 